<script setup>
import {Lock, UserFilled} from "@element-plus/icons-vue";
import api from '@/api/index.js'

import blogStore from "@/stores/blog.js";
import router from "@/router/index.js";

const lognsto = blogStore()
const userlogn = reactive({
  username: "missc",
  password: "missc"
})

function login() {

  api.postLogin(userlogn).then(
      res => {
        if (res.data.code === 200) {
          console.log("登录成功！")
          lognsto.token = res.data.token
          lognsto.user = res.data.data
          ElMessage({
            showClose: true,
            message: '登录成功！',
            type: 'success'

          })
          router.push("admin")
        } else {
          console.log("登录失败！")
          ElMessage({
            showClose: true,
            message: res.data.msg,
            type: 'error',
          })
        }


      }
  )
}
</script>

<template>
  <div class="login">
    <!--    卡片背景-->
    <el-card class="box-card">
      <div style="text-align: center;">
        <el-text class="mx-1">登录</el-text>
      </div>

      <!--    输入框  -->
      <div class="sr">
        <!--用户输入        -->

        <el-input v-model="userlogn.username" :prefix-icon="UserFilled" name="username" placeholder="输入账户"
                  size="large"
                  type="text"></el-input>

      </div>
      <div class="sr">
        <!--密码输入        -->

        <el-input v-model="userlogn.password" :prefix-icon="Lock" name="password" placeholder="输入密码" show-password
                  size="large"
                  type="password"></el-input>

      </div>

      <!--      按钮-->
      <div class="bt">
        <el-button round size="large" style="width: 100%" type="primary" @click="login">登录</el-button>
      </div>
      <!--三方登录-->
      <div class="dashed-line"></div>
      <!-- 三方图标     -->
      <div>


        <div class="icon">
          <!--QQ图标-->
          <svg class="icon" height="40"
               viewBox="0 0 1024 1024" width="60">
            <path
                d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z"
            ></path>
          </svg>

          <!--微信图标-->
          <svg class="icon" height="40" viewBox="0 0 1024 1024" width="60">
            <path
                d="M683.058 364.695c11 0 22 1.016 32.943 1.976C686.564 230.064 538.896 128 370.681 128c-188.104 0.66-342.237 127.793-342.237 289.226 0 93.068 51.379 169.827 136.725 229.256L130.72 748.43l119.796-59.368c42.918 8.395 77.37 16.79 119.742 16.79 11 0 21.46-0.48 31.914-1.442a259.168 259.168 0 0 1-10.455-71.358c0.485-148.002 128.744-268.297 291.403-268.297l-0.06-0.06z m-184.113-91.992c25.99 0 42.913 16.79 42.913 42.575 0 25.188-16.923 42.579-42.913 42.579-25.45 0-51.38-16.85-51.38-42.58 0-25.784 25.93-42.574 51.38-42.574z m-239.544 85.154c-25.384 0-51.374-16.85-51.374-42.58 0-25.784 25.99-42.574 51.374-42.574 25.45 0 42.918 16.79 42.918 42.575 0 25.188-16.924 42.579-42.918 42.579z m736.155 271.655c0-135.647-136.725-246.527-290.983-246.527-162.655 0-290.918 110.88-290.918 246.527 0 136.128 128.263 246.587 290.918 246.587 33.972 0 68.423-8.395 102.818-16.85l93.809 50.973-25.93-84.677c68.907-51.93 120.286-119.815 120.286-196.033z m-385.275-42.58c-16.923 0-34.452-16.79-34.452-34.179 0-16.79 17.529-34.18 34.452-34.18 25.99 0 42.918 16.85 42.918 34.18 0 17.39-16.928 34.18-42.918 34.18z m188.165 0c-16.984 0-33.972-16.79-33.972-34.179 0-16.79 16.927-34.18 33.972-34.18 25.93 0 42.913 16.85 42.913 34.18 0 17.39-16.983 34.18-42.913 34.18z"
                fill="#09BB07"></path>
          </svg>
          <!--github图标-->
          <svg class="icon" height="40" viewBox="0 0 1024 1024" width="60">
            <path
                d="M498.894518 100.608396c-211.824383 0-409.482115 189.041494-409.482115 422.192601 0 186.567139 127.312594 344.783581 295.065226 400.602887 21.13025 3.916193 32.039717-9.17701 32.039717-20.307512 0-10.101055 1.176802-43.343157 1.019213-78.596056-117.448946 25.564235-141.394311-49.835012-141.394311-49.835012-19.225877-48.805566-46.503127-61.793368-46.503127-61.793368-38.293141-26.233478 3.13848-25.611308 3.13848-25.611308 42.361807 2.933819 64.779376 43.443441 64.779376 43.443441 37.669948 64.574714 98.842169 45.865607 122.912377 35.094286 3.815909-27.262924 14.764262-45.918819 26.823925-56.431244-93.796246-10.665921-192.323237-46.90017-192.323237-208.673623 0-46.071292 16.498766-83.747379 43.449581-113.332185-4.379751-10.665921-18.805298-53.544497 4.076852-111.732757 0 0 35.46063-11.336186 116.16265 43.296085 33.653471-9.330506 69.783343-14.022365 105.654318-14.174837 35.869952 0.153496 72.046896 4.844332 105.753579 14.174837 80.606853-54.631248 116.00813-43.296085 116.00813-43.296085 22.935362 58.18826 8.559956 101.120049 4.180206 111.732757 27.052123 29.584806 43.443441 67.260893 43.443441 113.332185 0 162.137751-98.798167 197.850114-192.799074 208.262254 15.151072 13.088086 28.65155 38.804794 28.65155 78.17957 0 56.484456-0.459464 101.94381-0.459464 115.854635 0 11.235902 7.573489 24.381293 29.014824 20.2543C825.753867 867.330798 933.822165 709.10924 933.822165 522.700713c0-233.155201-224.12657-422.192601-434.927647-422.192601L498.894518 100.608396z"
                fill="#3F3F3F"></path>
          </svg>
          <!--gitee图标-->
          <svg class="icon" height="40" viewBox="0 0 1024 1024" width="60">
            <path
                d="M512 512m-494.933333 0a494.933333 494.933333 0 1 0 989.866666 0 494.933333 494.933333 0 1 0-989.866666 0Z"
                fill="#C71D23"></path>
            <path
                d="M762.538667 457.045333h-281.088a24.4736 24.4736 0 0 0-24.439467 24.405334v61.098666c-0.034133 13.5168 10.922667 24.439467 24.405333 24.439467h171.1104c13.5168 0 24.439467 10.922667 24.439467 24.439467v12.219733a73.3184 73.3184 0 0 1-73.3184 73.3184h-232.209067a24.439467 24.439467 0 0 1-24.439466-24.439467v-232.174933a73.3184 73.3184 0 0 1 73.3184-73.3184h342.152533c13.482667 0 24.405333-10.922667 24.439467-24.439467l0.034133-61.098666a24.405333 24.405333 0 0 0-24.405333-24.439467H420.352a183.296 183.296 0 0 0-183.296 183.296V762.538667c0 13.482667 10.922667 24.439467 24.405333 24.439466h360.516267a164.9664 164.9664 0 0 0 165.000533-165.000533v-140.526933a24.439467 24.439467 0 0 0-24.439466-24.439467z"
                fill="#FFFFFF"></path>
          </svg>

        </div>


      </div>


    </el-card>


  </div>


</template>

<style scoped>
.dashed-line {
  margin-top: 30px;
  width: 100%; /* 设置虚线的宽度 */
  height: 0; /* 设置高度为 0，使其看起来像一根线 */
  border-top: 2px dashed #aeafb0; /* 创建上边界为虚线，大小和颜色根据需要调整 */
}


.icon {
  text-align: center; /*居中*/
  margin-top: 15px; /*图标高度*/
}


.bt {
  text-align: center;
  margin-top: 30px;


}

.mx-1 {
  font-size: 30px;

}

.sr {
  margin-top: 20px;

}


.box-card {
  width: 400px;
  height: 400px;
  border-radius: 20px; /*弧度角度*/

}


.login {
  width: 400px;
  height: 400px;
  margin: 0 auto; /* 水平居中 */
  position: relative; /* 相对定位 */
  top: 200px; /* 向下移动 */
}
</style>